Conditional UI Patterns (1/5)
What is the class: directive?

    In Svelte, the `class:` directive allows you to conditionally add or remove CSS classes on an element based on a boolean expression. It provides a reactive and declarative way to toggle classes without manually manipulating `classList`.

    You prefix the class name with `class:` and assign a boolean expression. If the expression evaluates to `true`, the class is added; if `false`, it is removed.

    Example: Toggling a Class

    You can apply multiple `class:` directives to a single element for different conditions.

    Example: Multiple Conditional Classes
    Best practices for `class:` directive:
    • Use `class:` for conditional class toggling instead of manually updating `className`.
    • Combine with reactive variables to automatically update styles when state changes.
    • Multiple `class:` directives can be applied on the same element for different conditions.
    • You can still use static class names alongside `class:` directives.